<template>
  <div class="recordList">
    <el-button type="primary" @click="selectRecord">选择源单</el-button>
    <scTable
      ref="table"
      :data="recordList"
      row-key="id"
      stripe
      hideRefresh
      hideSetting
      hidePagination
      height="450"
      class="list"
    >
      <!-- <el-table-column label="ID" prop="id" width="50"></el-table-column> -->
      <el-table-column
        label="客户"
        prop="customerName"
        min-width="150"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="合同编号" prop="num" min-width="150">
      </el-table-column>
      <el-table-column label="业务员" prop="customerAdminName" min-width="150">
      </el-table-column>
      <el-table-column label="签订日期" prop="orderTime" min-width="150">
      </el-table-column>
      <el-table-column label="应收金额" prop="actualMoney" min-width="150">
      </el-table-column>
      <el-table-column
        label="实收金额"
        prop="customerPaymentMoney"
        min-width="150"
      >
      </el-table-column>
      <el-table-column label="本次收款金额" width="300">
        <template #default="scope">
          <el-input
            v-model="scope.row.money"
            clearable
            placeholder="请输入本次收款金额"
            oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
            @blur="scope.row.money = $event.target.value"
            @input="changeMoney($event, scope.row)"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否完成" width="150">
        <!-- isCollection 收款完成标识 0未完成 1已完成 -->
        <template #default="scope">
          <el-checkbox
            v-model="scope.row.isCollection"
            :true-label="1"
            :false-label="0"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="150">
        <template #default="scope">
          <el-button-group>
            <el-button
              text
              type="primary"
              size="small"
              @click="table_del(scope.row, scope.$index)"
              >移除</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </scTable>
    <el-dialog title="选择源单" v-model="visible" width="40%" destroy-on-close>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-date-picker
            v-model="searchValue.startTime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="开始时间"
            :teleported="false"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="searchValue.endTime"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="开始时间"
            :teleported="false"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-form-item width="100%">
            <el-button type="primary" @click="upsearch">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <scTable
        ref="recordTable"
        :apiObj="apiObj"
        :params="params"
        row-key="id"
        stripe
        hideRefresh
        hideSetting
        class="list"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="合同编号" prop="num" min-width="150">
        </el-table-column>
        <el-table-column label="签订日期" prop="orderTime" min-width="150">
        </el-table-column>
        <el-table-column label="应收金额" prop="actualMoney" min-width="150">
        </el-table-column>
        <el-table-column
          label="实收金额"
          prop="customerPaymentMoney"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          label="业务员"
          prop="customerAdminName"
          min-width="150"
        >
        </el-table-column>
      </scTable>
      <template #footer>
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm()">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: '',
  emits: ['setTotalMoney'],
  data () {
    return {
      recordList: [],
      apiObj: this.$API.finance.collectManagement.getCustomerOrders,
      params: {
        isCollection: 0,
        customerId: '',
        startTime: '',
        endTime: ''
      },
      searchValue: {
        startTime: "",
        endTime: "",
      },
      visible: false,
      selectedRecord: []//已选择的记录
    }
  },
  props: {
    customerId: {
      type: [Number, String]
    }
  },
  methods: {
    // 选择需要付款的单子
    selectRecord () {
      if (!this.customerId) {
        this.$message.warning('请选择客户')
        return
      }
      this.visible = true
      this.params.customerId = this.customerId
      // let list = this.$refs.recordTable.tableData


      this.$nextTick(() => {
        let data = this.$refs.recordTable
        console.log(data)
      })
      // this.recordList.forEach(item => {
      //   this.selectedRecord.forEach((s_item, index) => {
      //     if (item.contractId == s_item.contractId) {

      //       // this.$refs.recordTable.toggleRowSelection(this.selectedRecord[index], true)
      //     }
      //   })
      // })


    },
    //搜索
    upsearch () {
      this.$refs.recordTable.upData(this.searchValue)
    },
    // 选择付款单据
    handleSelectionChange (list) {
      this.selectedRecord = list
    },

    //计算总付款金额
    changeMoney (val, row) {
      console.log(row)
      if (val >= row.actualMoney - row.customerPaymentMoney) row.money = row.actualMoney - row.customerPaymentMoney
      let num = 0
      this.recordList.forEach(item => {
        num += Number(item.money)
      })
      this.$emit('setTotalMoney', num)
    },

    // 移除
    table_del (row) {
      this.recordList = this.recordList.filter(item => item.id != row.id)
    },

    confirm () {
      if (this.selectedRecord.length == 0) {
        this.$message.warning('请至少选择一款记录付款')
        return
      }
      this.visible = false
      this.recordList = this.selectedRecord
      let num = 0
      this.recordList.forEach(item => {
        item.contractId = item.id
        item.isCollection = 0
        item.money = item.actualMoney - item.customerPaymentMoney
        num += Number(item.money)
        delete item.id
      })
      this.$emit('setTotalMoney', num)
    }
  }
}
</script>
<style lang="scss" scoped>
.recordList {
  width: 100%;
  max-height: 500px;
  border-radius: 4px;
  border: 1px #dcdfe6 solid;
  padding: 15px;

  .list {
    margin-top: 20px;
  }
}
</style>